<template>
  <view class="punch-detail-wrapper">
    <view class="punch-detail">
      <view class="punch-detail-label">打卡时间</view>
      <view class="punch-detail-content">{{ punchTime }}</view>
    </view>
    <view class="punch-detail">
      <view class="punch-detail-label">打卡详情</view>
      <view class="punch-detail-content">
        <view>{{ location }}</view>
        <map
          v-if="item"
          :latitude="coord[1]"
          :longitude="coord[0]"
          :markers="markers"
          class="punch-detail-map"
        />
      </view>
    </view>
    <view v-if="type === 'outside'" class="punch-detail">
      <view class="punch-detail-label">外出说明</view>
      <view class="punch-detail-content">{{ item.instruction }}</view>
    </view>
  </view>
</template>
<script>
import { formatDateAll } from "@/utils/tools.js";
export default {
  onLoad(option) {
    this.item = JSON.parse(decodeURIComponent(option.item));
  },
  name: "PunchDetail",
  data() {
    return {
      item: {},
      date: "",
      type: ""
    };
  },
  computed: {
    punchTime: function() {
      return `${this.date} ${
        this.item && this.item.punchTime
          ? formatDateAll(this.item.punchTime)
          : "--"
      }`;
    },
    coord: function() {
      return this.item && this.item.coordinate
        ? this.item.coordinate.split(",")
        : [120.38299, 36.06623];
    },
    location: function() {
      return this.item
        ? this.type === "outside"
          ? this.item.location
          : this.item.location
        : "";
    },
    markers: function() {
      return [
        {
          id: 0,
          latitude: this.coord[1],
          longitude: this.coord[0],
          iconPath: "/punchcard/img/dingwei.png",
          width: 30,
          height: 30
        }
      ];
    }
  }
};
</script>
